<template>
           <div class="level">
              <h1>医院</h1>
              <div class="sec">
                <div class="left">等级:</div>
                <ul class="right">
                  <li :class="{active: activeIndex === 0}"
                  @click="changeLevel(0)" >全部</li>
                  <li  v-for="item in levelList" :key="item.id" 
                  :class="{active: activeIndex === item.value}"
                  @click="changeLevel(item.value)"
                  >{{ item.name }}</li>

                </ul>
              </div>
            </div>
</template>

<script setup>
import { getHospitalLevelListAPI } from '@/api/hospital.js'
import { ref, onMounted , defineEmits} from 'vue'
const levelList = ref([])
const getLevelList = async () => {
  const res = await getHospitalLevelListAPI('Hostype')
  levelList.value = res.data
  console.log(res,1)
}
onMounted(() => {
  getLevelList()
})
const changeLevel = (value) => {
  activeIndex.value = value
  if (value === 0) {
    emit('onChange', '')
  } else {
    emit('onChange', value)
  }
  
}

const emit = defineEmits(['onChange'])

const activeIndex = ref(0)
</script>

<style lang="scss" scoped>
 .level {
    color: #7f7f7f;
    h1 {
      font-size: 18px;
      font-weight: 900;
      color: #7f7f7f;
      margin: 10px 0;
    }
    .sec {
      display: flex;
     align-items: center;
      .left {
        margin-right: 10px;
      }
      .right {
        list-style: none;
        display: flex;
        li {
          margin-right: 10px;
          &.active {
            color: #55a6fe;
          }
          &:hover {
            color: #55a6fe;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>